import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:getwidget/colors/gf_color.dart';
import 'package:getwidget/components/image/gf_image_overlay.dart';
import 'package:getwidget/components/intro_screen/gf_intro_screen.dart';
import 'package:getwidget/components/intro_screen/gf_intro_screen_bottom_navigation_bar.dart';
import 'package:getwidget_demo/app/routes/app_pages.dart';

import '../controllers/gfintroscreen_controller.dart';

class GfintroscreenView extends StatefulWidget {
  GfintroscreenView({Key? key}) : super(key: key);

  @override
  _GfintroscreenViewState createState() => _GfintroscreenViewState();
}

class _GfintroscreenViewState extends State<GfintroscreenView> {
  late PageController _pageController;
  late List<Widget> slideList;
  late int initialPage;

  String avatarPath = 'assets/images/cliu.jpg';

  @override
  void initState() {
    _pageController = PageController(initialPage: 0);
    initialPage = _pageController.initialPage;

    slides();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: GFIntroScreen(
        color: Colors.blueGrey,
        slides: slideList,
        pageController: _pageController,
        currentIndex: initialPage,
        pageCount: slideList.length,
        showIntroScreenBottomNavigationBar: true, // 展示底部导航
        introScreenBottomNavigationBar: GFIntroScreenBottomNavigationBar(
          pageController: _pageController,
          pageCount: slideList.length,
          currentIndex: initialPage,
          onForwardButtonTap: () {
            _pageController.nextPage(
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeIn
            );
          },
          onBackButtonTap: () {
            _pageController.previousPage(
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeOut
            );
          },
          navigationBarColor: Colors.white,
          showDivider: false,
          inactiveColor: Colors.grey.shade200,
          activeColor: GFColors.SUCCESS,
          showPagination: true,
          forwardButtonText: '下一步',
          backButtonText: '上一步',
          doneButtonText: '启动',
          onDoneTap: () {
            Get.toNamed(Routes.HOME);
          },
          skipButtonText: '忽略',
          onSkipTap: () {
            Get.snackbar('提示', '忽略了');
          },
        ),
      )
    );
  }

  void slides() {
    slideList = [
      Container(
        width: Get.width,
        height: Get.height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(0),
          image: DecorationImage(
            image: AssetImage('assets/images/dh1.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.2), 
              BlendMode.darken
            ),
          )
        ),
      ),
      Container(
        child: GFImageOverlay(
          width: Get.width,
          padding: EdgeInsets.all(16),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 70.0, left: 20),
                child: Text(
                  '紫霞仙子: 等待我的盖世英雄~',
                  style: TextStyle(
                    color: Colors.white,
                    decoration: TextDecoration.none,
                    fontSize: 25
                  ),
                ),
              ),
            ],
          ),
          color: Colors.orange,
          image: AssetImage('assets/images/dh3.jpg'),
          boxFit: BoxFit.cover,
          colorFilter: ColorFilter.mode(
            Colors.black.withOpacity(0.2), 
            BlendMode.darken
          ),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
      Container(
        width: Get.width,
        height: Get.height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(0),
          image: DecorationImage(
            image: AssetImage('assets/images/dh4.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.2), 
              BlendMode.darken
            ),
          )
        ),
      ),
      Container(
        width: Get.width,
        height: Get.height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(0),
          image: DecorationImage(
            image: AssetImage('assets/images/dh5.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.2), 
              BlendMode.darken
            ),
          )
        ),
      ),
    ];
    // return slideList;
  }
}